<!-- fileinput -->
<link href="/vendors/bootstrap-fileinput/css/fileinput.css" rel="stylesheet"/>
<!-- bootstrap-progressbar -->
<link href="/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<main class="app-content" id="profileVue">
    <div class="row user">
        <div class="col-md-3">
            <div class="tile p-0">
                <ul class="nav flex-column nav-tabs user-tabs">
                    <li class="nav-item"><a class="nav-link active" href="#user-settings" data-toggle="tab">个人信息</a>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#user-timeline" data-toggle="tab" shiro:hasAnyRoles="商家,用户">我的留言</a></li>
                    <li class="nav-item"><a class="nav-link" href="#user-travel" data-toggle="tab" shiro:hasAnyRoles="商家,用户">我的游记</a></li>
                    <li class="nav-item" shiro:hasAnyRoles="商家"><a class="nav-link" href="#user-scenery" data-toggle="tab">我的景点</a></li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="tab-content ">
                <div class="tab-pane active" id="user-settings">
                    <div class="tile user-settings">
                        <div class="clearfix">
                            <div class="float-left" style="margin: 30px;">
                                <div class="profile_img">
                                    <div id="crop-avatar">
                                        <!-- Current avatar -->
                                        <img class="img-responsive avatar-view" v-bind:src="user.userImage"
                                             alt="Avatar"
                                             title="Change the avatar" style="max-width: 200px;"/>
                                    </div>
                                </div>
                                <h3>用户{{user.userName}}</h3>

                                <a class="btn btn-success" data-toggle="modal" data-target="#editProfile">
                                    <i class="fa fa-edit m-right-xs"></i>修改信息
                                </a>
                                <br/>
                            </div>
                            <div class="float-left" style="margin: 30px;">
                                <div style="width: 36rem;">
                                    <ul class="list-group list-group-horizontal">
                                        <li class="list-group-item" style="width: 20%;">账号</li>
                                        <li class="list-group-item" style="width: 80%">{{user.userName}}</li>
                                    </ul>
                                    <ul class="list-group list-group-horizontal">
                                        <li class="list-group-item" style="width: 20%;">手机号码</li>
                                        <li class="list-group-item" style="width: 80%">{{user.userPhone}}</li>
                                    </ul>
                                    <ul class="list-group list-group-horizontal">
                                        <li class="list-group-item" style="width: 20%;">邮箱</li>
                                        <li class="list-group-item" style="width: 80%">{{user.userEmail}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade " id="user-timeline">
                    <div class="tile user-settings">
                        <div class="col-md-12" v-for="(message,index) in user.messages">
                            <div class="tile">
                                <div class="tile-title-w-btn">
                                    <h3 class="title"></h3>
                                    <div class="btn-group">
                                        <a class="btn btn-primary" href="#" @click="initMessage(message.messageId)"
                                           data-toggle='modal' data-target='#editModal'>
                                            <i class="fa fa-lg fa-edit"></i>
                                        </a>
                                        <a class="btn btn-primary" href="#" @click="deleteMessage(message.messageId)">
                                            <i class="fa fa-lg fa-trash"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="tile-body">
                                    <pre>{{message.messageDetail}}</pre>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>

                    </div>
                </div>
                <div class="tab-pane fade " id="user-travel">
                    <div class="tile user-settings">
                        <div class="clearfix">
                            <div class="float-left" style="margin: 13px;" v-for="travel in user.travels">
                                <div class="card" style="width: 18rem; height: 500px;">
                                    <img v-bind:src="travel.images[0].image" class="card-img-top"
                                         style="height: 350px;max-width: 18rem">
                                    <div class="card-body">
                                        <h5 class="card-title">
                                            <span v-for="(i,index) in 7">{{travel.travelName[index]}}</span>......
                                        </h5>
                                        <p class="card-text">
                                            <span v-for="(i,index) in 15">{{travel.travelDetail[index]}}</span>......
                                        </p>
                                        <a href="#" class="btn btn-primary"
                                           @click="initTravel(travel.travelId)">查看详情</a>
                                        <a href="#" class="btn btn-primary" @click="deleteTravel(travel.travelId)"
                                           style="float: right">删除游记</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade"  id="user-scenery">
                    <div class="tile user-settings">
                        <div class="col-md-12">
                            <div class="tile">
                                <span v-show="!show">
                                    <a class="btn btn-success" data-toggle="modal" data-target="#addScenery">
                                        <i class="fa fa-edit m-right-xs"></i>创建景点
                                    </a>
                                </span>
                                <span v-show="show">
                                    <a class="btn btn-success" onclick="deleteScenery()">
                                        <i class="fa fa-edit m-right-xs"></i>删除景点
                                    </a>
                                <div class="tile-body">
                                    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"
                                         style="margin-bottom: 50px;border: 3px dotted seagreen">
                                        <div class="carousel-inner">
                                            <div class="carousel-item" v-for="(image,index) in scenery.images"
                                                 :class="[index==0?'active':'']" align="center">
                                                <img :src="image.image" class="d-block" alt="image.imageId"
                                                     style="height: 500px;overflow: hidden;">
                                            </div>
                                        </div>
                                        <a class="carousel-control-prev" href="#carouselExampleControls" role="button"
                                           data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Previous</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselExampleControls" role="button"
                                           data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Next</span>
                                        </a>
                                    </div>
                                    <div>
                                        <div class="clearfix" style="margin-bottom: 50px;">
                                            <div class="float-left" style="width: 40%;">
                                                <span style="color: seagreen">
                                                地址：
                                                </span>
                                                <p>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{scenery.sceneryLocation}}
                                                </p>
                                                <span style="color: seagreen">
                                                简介：
                                                </span>
                                                <p>
                                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{scenery.sceneryDetail}}
                                                </p>

                                            </div>
                                            <div class="float-right" style="color: seagreen">
                                                <div style="width: 30rem;">
                                                    <span style="width: 100%;">联系方式</span>
                                                    <ul class="list-group list-group-horizontal">
                                                        <li class="list-group-item" style="width: 20%;">手机号码</li>
                                                        <li class="list-group-item" style="width: 80%">
                                                            {{user.userPhone}}
                                                        </li>
                                                    </ul>
                                                    <ul class="list-group list-group-horizontal">
                                                        <li class="list-group-item" style="width: 20%;">邮箱</li>
                                                        <li class="list-group-item" style="width: 80%">
                                                            {{user.userEmail}}
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <span>
                                            留言：
                                        </span>
                                        <div class="clearfix">
                                            <div class="col-md-6 float-left"
                                                 v-for="(message,index) in scenery.messages">
                                                <div class="tile">
                                                    <div class="tile-title-w-btn">
                                                        <h3 class="title"></h3>
                                                        <div class="btn-group">
                                                        </div>
                                                        <a class="btn btn-primary" href="#"
                                                           @click="deleteMessage(message.messageId)">
                                                            <i class="fa fa-lg fa-trash"></i>
                                                        </a>
                                                    </div>
                                                    <div class="tile-body">
                                                        <pre>{{message.messageDetail}}</pre>
                                                        <span>{{message.createTime}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="account/profileEdit"></div>
    <div th:replace="account/messageEdit"></div>
    <div th:replace="pages/addScenery"></div>
</main>
<style>
    p {
        color: #8fdf82;
        white-space: -moz-pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
    }
</style>
<!-- fileinput -->
<script src="/vendors/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/vendors/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script>
    var profileVue = new Vue({
        el: "#profileVue",
        data: {
            show: false,
            user: {
                userId:"",
                userName: "",
                password: "",
                userPhone: "",
                userEmail: "",
                userImage: "",
                messages: [],
                travels: [],
                scenery: ""
            },
            message: {
                messageId: "",
                messageDetail: "",
                createTime: ""
            },
            travel: {
                travelId: "",
                travelName: "",
                travelDetail: "",
                createTime: "",
                images: []
            },
            scenery: {
                userId: "",
                images:[]
            }
        },
        methods: {
            initPage: function () {
                var self = this;
                self.user.id = $("#userId").val();
                $.ajax({
                    url: "/api/user/" + $("#userId").val(),
                    type: "get",
                    success: function (rs) {
                        self.user = rs;
                        console.log(rs)
                        if (self.user.scenery !== null) {
                            self.show = true;
                            self.scenery = self.user.scenery;
                        }
                    }
                });
            },
            initUploadImage: function () {
                var self = this;
                $("#uploadImage").fileinput({
                    uploadUrl: "/api/upload/tx",
                    enctype: 'multipart/form-data',
                    previewFileType: "image",
                    uploadAsync: true,
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    maxFileCount: 1,
                    maxFileSize: 1024,
                    minImageWidth: 50,
                    minImageHeight: 50,
                    maxImageWidth: 1000,
                    maxImageHeight: 1000,
                    msgFilesTooMany: "Upload file count({n} - {m})",
                    showCaption: false,
                    dropZoneEnabled: false,
                    showBrowse: true,
                    browseClass: "btn btn-primary",
                    uploadClass: "btn btn-info",
                    removeClass: "btn btn-danger",
                    uploadLabel: "上传",
                    browseLabel: "选择",
                    removeLabel: "移除"
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status === 200) {
                        self.user.userImage = data.response.data;
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            updateModule: function () {
                var self = this;
                $.ajax({
                    url: "/api/user/v2",
                    type: "put",
                    contentType: "application/json",
                    data: JSON.stringify(self.user),
                    success: function (rs) {
                        $("[name=userName]").val(rs.data.userName);
                        $("[name=userImage]").attr("src", rs.data.userImage);
                        window.location.reload();
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            updateModule2: function () {
                var self = this;
                self.user.password = $("#password").val();
                if (self.user.password === "") {
                    layer.alert("不能为空", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/user",
                        type: "put",
                        contentType: "application/json",
                        data: JSON.stringify(self.user),
                        success: function (rs) {
                            layer.alert(rs.message, {icon: 1});
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    });
                }
            },
            deleteMessage: function (id) {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel: {
                            label: "取消"
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            $.ajax({
                                url: "/api/message/" + id,
                                type: "delete",
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        self.initPage();
                                    } else {
                                        layer.alert(rs.message, {icon: 0});
                                    }
                                },
                                error: function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            })
                        }
                    }
                })

            },
            initMessage: function (id) {
                var self = this;
                $.ajax({
                    url: "/api/message/" + id,
                    type: "get",
                    success: function (rs) {
                        self.message = rs;
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                })
            },
            updateMessage: function () {
                var self = this;
                $.ajax({
                    url: "/api/message",
                    type: "put",
                    contentType: "application/json",
                    data: JSON.stringify(self.message),
                    success: function (rs) {
                        layer.alert(rs.message, {icon: 1});
                        self.initPage();
                    },
                    error: function (rs) {
                        layer.alert(rs.responseText, {icon: 0});
                    }
                });
            },
            initTravel: function (id) {
                var self = this;
                sessionStorage.setItem("travelId", id);
                window.location.href = "/pages/travel";
            },
            deleteTravel: function (id) {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel: {
                            label: "取消"
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            $.ajax({
                                url: "/api/travel/" + id,
                                type: "delete",
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        self.initPage();
                                    } else {
                                        window.location.href = rs.data;
                                    }
                                },
                                error: function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            });
                        }
                    }
                })
            },
            initImage: function () {
                var self = this;
                $("#uploadImage1").fileinput({
                    language: "zh",
                    uploadUrl: "/api/upload/scenery",
                    allowedFileExtensions: ["png", "jpg", "jpeg", "ico", "bmp", "gif"],
                    showUpload: true,
                    showRemove: false,
                    showPreview: true,
                    showCaption: true,
                    browseClass: "btn btn-primary",
                    removeClass: "btn btn-danger",
                    dropZoneEnabled: true,
                    maxFileCount: 5,
                    autoReplace: true,//是否可替换
                    layoutTemplates: {
                        actionUpload: ''
                    },
                    enctype: 'multipart/form-data',
                    msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                    validateInitialCount: true,
                }).on('fileerror', function (event, data, msg) {
                    layer.alert("Upload file failed" + msg, {icon: 0});
                }).on('fileuploaded', function (event, data) {
                    if (data.response.status === 200) {
                        console.log(data.response.data)
                        self.scenery.images.push({"image": data.response.data})
                    } else {
                        $(".fileinput-remove-button").click();
                    }
                    layer.alert(data.response.message, {icon: 0});
                }).on('fileclear', function (event) {
                });
            },
            updateModule1: function () {
                var self = this;
                self.scenery.user = {userId: self.user.userId}
                console.log(self.scenery)
                if (self.scenery.sceneryName === "" || self.scenery.sceneryLocation === "" || self.scenery.sceneryDetail === "" || self.scenery.images.length === 0) {
                    layer.alert("不能为空", {icon: 0});
                } else {
                    $.ajax({
                        url: "/api/scenery",
                        type: "post",
                        contentType: "application/json",
                        data: JSON.stringify(self.scenery),
                        success: function (rs) {
                            if (rs.status === 200) {
                                window.location.reload();
                            } else {
                                layer.alert(rs.message, {icon: 0});
                            }
                        },
                        error: function (rs) {
                            layer.alert(rs.responseText, {icon: 0});
                        }
                    })
                }
            },
            deleteScenery: function () {
                var self = this;
                bootbox.confirm({
                    message: "确认删除？",
                    buttons: {
                        confirm: {
                            label: "确定"
                        },
                        cancel: {
                            label: "取消"
                        }
                    },
                    callback: function (result) {
                        if (result) {
                            $.ajax({
                                url: "/api/scenery/" + self.user.scenery.sceneryId,
                                type: "delete",
                                success: function (rs) {
                                    if (rs.status === 200) {
                                        window.location.reload();
                                    } else {
                                        layer.alert(rs.message, {icon: 0});
                                    }
                                },
                                error: function (rs) {
                                    layer.alert(rs.responseText, {icon: 0});
                                }
                            })
                        }
                    }
                })
            }
        },
        created: function () {
            window.deleteMessage = this.deleteMessage
            window.deleteTravel = this.deleteTravel
            window.deleteScenery = this.deleteScenery
        },
        mounted: function () {
            this.initPage();
            this.initUploadImage();
            this.initImage();
        }
    })
</script>

